<template>
  <div class="box">
    <div id="app">
      <ul>
        <li @click="cur=0" :class="{active:cur==0}">健身圈</li>
        <li @click="cur=1" :class="{active:cur==1}">关注</li>
        <li @click="cur=2" :class="{active:cur==2}">附近</li>
      </ul>
    </div>
    <!-- 健身圈 -->
    <div class="tab-content" v-if="cur==0">
      <Ituidao />
    </div>
    <!-- 关注 -->
    <div class="tab-content" v-else-if="cur==1">
      <Concern />
    </div>
    <!-- 附近 -->
    <div class="tab-content" v-else>
      <Nearby />
    </div>
  </div>
</template>

<script>
import Ituidao from "./Ituidao/Ituidao";
import Concern from "./Concern/Concern";
import Nearby from "./Nearby/Nearby";
export default {
  data() {
    return {
      cur: 0
    };
  },
  components: {
    Ituidao,
    Concern,
    Nearby
  }
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  overflow: hidden;
  #app {
    width: 100%;
    height: 1rem;
    background: #fff;
    margin: 0 auto;
    border-bottom: 2px solid #6666;
    ul {
      li {
        color: #666;
        padding: 0.3rem 0.8rem;
        float: left;
        font-size: 14px;
        margin-left: 0.24rem;
      }
      .active {
        color: #000;
      }
    }
  }
}

</style>